<template>
  <div>
    <template>
      <el-button type="primary"
        class="btn"
        @click="dialogFormVisible = true">新 增</el-button>
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%">
        <el-table-column
          prop="Year"
          label="年份"
          sortable
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="Title"
          label="标题"
          width="700">
        </el-table-column>
        <el-table-column
          prop="Category"
          label="类别"
          width="120"
          :filters="[{ text: '论文', value: '论文' },
          { text: '专利', value: '专利' },
          { text: '获得奖项', value: '获得奖项' },]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.Category === '论文' ? 'primary' : (scope.row.Category ==='专利'?'success':'info')"
              disable-transitions>{{scope.row.Category}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 新增信息 -->
    <div>
      <el-dialog title="添加成果信息" :visible.sync="dialogFormVisible" @close="resetAddForm">
        <el-form inline="true" :model="Form" :rules="rules" ref="addform" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input style="width:260px" v-model="Form.title" placeholder="请输入成果标题"></el-input>
        </el-form-item>
         <el-form-item class="year" label="年份" prop="year">
          <div class="container">
          <div class="block">
            <el-date-picker
              v-model="Form.year"
              type="year"
              format= "yyyy"
              value-format= "yyyy"
              placeholder="选择年">
            </el-date-picker>
          </div></div>
        </el-form-item>
        <el-form-item class="category" label="类别" prop="category">
          <el-select style="width:260px" v-model="Form.category" placeholder="请选择成果类别">
            <el-option label="论文" value="论文"></el-option>
            <el-option label="专利" value="专利"></el-option>
            <el-option label="获得奖项" value="获得奖项"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载链接" prop="link">
          <el-input style="width:260px" v-model="Form.link"></el-input>
        </el-form-item>
        <el-form-item label="提取码" prop="code">
          <el-input style="width:260px" v-model="Form.code"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="abstracts">
          <el-input style="width:510px"  type="textarea" v-model="Form.abstracts"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="savecreate()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改信息 -->
    <div>
      <el-dialog title="修改成果信息" :visible.sync="dialogForm2Visible" @close="resetEditForm">
        <el-form inline="true" :model="Form2" :rules="rules" ref="editform" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input style="width:260px" v-model="Form2.title" placeholder="请输入成果标题"></el-input>
        </el-form-item>
         <el-form-item class="year" label="年份" prop="year">
          <div class="container">
          <div class="block">
            <el-date-picker
              v-model="Form2.year"
              type="year"
              format= "yyyy"
              value-format= "yyyy"
              placeholder="选择年">
            </el-date-picker>
          </div></div>
        </el-form-item>
        <el-form-item class="category" label="类别" prop="category">
          <el-select style="width:260px" v-model="Form2.category" placeholder="请选择成果类别">
            <el-option label="论文" value="论文"></el-option>
            <el-option label="专利" value="专利"></el-option>
            <el-option label="获得奖项" value="获得奖项"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下载链接" prop="link">
          <el-input style="width:260px" v-model="Form2.link"></el-input>
        </el-form-item>
        <el-form-item label="提取码" prop="code">
          <el-input style="width:260px" v-model="Form2.code"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="abstracts">
          <el-input style="width:510px"  type="textarea" v-model="Form2.abstracts"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm2Visible = false">取 消</el-button>
          <el-button type="primary" @click="saveedit()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="page">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      background
      layout="prev, pager, next"
      :total="tableData.length">
    </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: "filterTable",
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      dialogImageUrl: "",
      dialogVisible: false,
      Visible: false,
      coverPic: "",
      disabled: false,
      hideUpload: false,
      dialogFormVisible: false,
      dialogForm2Visible: false,
      formLabelWidth: "120px",
      Form: {
        id: "",
        title: "",
        year: "",
        category: "",
        abstracts: "",
        link: "",
        code: ""
      },
      Form2: {
        id: "",
        title: "",
        year: "",
        category: "",
        abstracts: "",
        link: "",
        code: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入成果标题", trigger: "blur" }
        ],
        year: [
          { required: true, message: "请选择年份", trigger: "change" }
        ],
        abstracts: [
          { required: true, message: "请填写摘要", trigger: "blur" }
        ],
        category: [
          { required: true, message: "请选择成果类别", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    // 新增对话框
    savecreate () {
      this.$refs.addform.validate((valid) => {
        if (valid) {
          this.$request.addachievements({
            title: this.Form.title,
            year: this.Form.year,
            category: this.Form.category,
            abstracts: this.Form.abstracts,
            link: this.Form.link,
            code: this.Form.code

          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              })
            } else {
              this.$message({
                message: "添加失败",
                type: "error"
              })
            }
            this.getachievements()
          }).catch(err => { console.log(err) })
          this.dialogFormVisible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetAddForm () {
      this.$refs.addform.resetFields()
    },
    // 修改对话框
    saveedit () {
      this.$refs.editform.validate((valid) => {
        if (valid) {
          this.$request.updateachievements({
            id: this.Form2.id,
            title: this.Form2.title,
            year: this.Form2.year,
            category: this.Form2.category,
            abstracts: this.Form2.abstracts,
            link: this.Form2.link,
            code: this.Form2.code
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              })
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              })
            }
            this.getachievements()
          }).catch(err => { console.log(err) })
          this.dialogForm2Visible = false
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetEditForm () {
      this.$refs.editform.resetFields()
    },
    // 成员列表
    getachievements () {
      // let _this = this
      this.$request.getachievements().then(res => {
        this.tableData = res.data
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    handleEdit (index, row) {
      console.log(row.Abstracts)
      this.Form2.id = row.Id
      this.Form2.title = row.Title
      this.Form2.year = row.Year
      this.Form2.abstracts = row.Abstracts
      this.Form2.category = row.Category
      this.Form2.link = row.Link
      this.Form2.code = row.Code
      this.dialogForm2Visible = true
    },
    handleDelete (index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$request.deleteachievements({id: row.Id
        }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            })
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            })
          }
          this.getachievements()
        }).catch(err => console.log(err))
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        })
      })
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    formatter (row, column) {
      return row.Abstracts
    },
    filterTag (value, row) {
      return row.Category === value
    }
  },
  mounted () {
    this.getachievements()
  }
}
</script>

<style >
.btn {
  margin-bottom: 10px;
}
.hide .el-upload--picture-card {
    display: none;
    /* width: 1rem;
    height: 1.35rem;
    overflow:hidden; */
}
.hide .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hide .el-upload:hover{
  border-color: #409eff;
}
.page{
  /* float: center; */
  text-align:center;
  margin:0 auto;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.photo{
  position: absolute;
  right:2.5rem;
  /* width: 1rem;
  height: 1.35rem; */
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.baseTheme .el-upload--picture-card {

  background-position-x: center;
  background-position-y: center;
  background-size: 100% 100%;
  width: 190px;
  height: 150px;
}
.baseTheme .el-upload-list--picture-card .el-upload-list__item {
  width: 190px;
  height: 150px;
  position: inherit;

}
.baseTheme .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 190px;
  height: 150px;
}
</style>
